<!-- 个人中心 -->
<template>
  <div class="grid h-screen-calc" style="align-content: flex-start;" ref="centreContent">
    <!-- 头部栏 -->
    <div class="col-12" style="height: 120px;" ref="headerContainer">
      <CommonHeaderToolBar></CommonHeaderToolBar>
    </div>
    <!-- 左侧导航栏 -->
    <div class="col-2 p-3 pt-4 centre__leftmenu">
      <StickyPanel top="50px" :dom="centreContent" class="mt-4">
        <template #content>
          <!-- 主页 -->
          <div class="centre__leftmenu__item centre__leftmenu__item-active" @click="menuClickHandler(0, $event)">
            <div class="flex justify-content-start align-items-center ml-2 p-1">
              <!-- 图标 -->
              <div class="centre__leftmenu__item-icon">
                <svg class="icon" viewBox="0 0 1024 1024" width="32" height="32">
                  <path
                      d="M170.666667 554.666667h256a42.666667 42.666667 0 0 0 42.666666-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666666-42.666667H170.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v341.333333a42.666667 42.666667 0 0 0 42.666667 42.666667z m-42.666667 298.666666a42.666667 42.666667 0 0 0 42.666667 42.666667h256a42.666667 42.666667 0 0 0 42.666666-42.666667v-170.666666a42.666667 42.666667 0 0 0-42.666666-42.666667H170.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v170.666666z m426.666667 0a42.666667 42.666667 0 0 0 42.666666 42.666667h256a42.666667 42.666667 0 0 0 42.666667-42.666667v-298.666666a42.666667 42.666667 0 0 0-42.666667-42.666667h-256a42.666667 42.666667 0 0 0-42.666666 42.666667v298.666666z m42.666666-426.666666h256a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-256a42.666667 42.666667 0 0 0-42.666666 42.666667v213.333333a42.666667 42.666667 0 0 0 42.666666 42.666667z"></path>
                </svg>
              </div>
              <!-- 文字 -->
              <div class="centre__leftmenu__item-text pb-1">
            <span>
              个人概述
            </span>
              </div>
            </div>
          </div>
          <!-- 文章 -->
          <div class="centre__leftmenu__item" @click="menuClickHandler(1, $event)">
            <div class="flex justify-content-start align-items-center ml-2 p-1">
              <div class="centre__leftmenu__item-icon">
                <svg class="icon" viewBox="0 0 1024 1024" width="32" height="32">
                  <path
                      d="M909.024 142a94.832 94.832 0 0 0-43.584-61.792 105.408 105.408 0 0 0-76.8-14.048 100.176 100.176 0 0 0-65.008 41.424l-101.216 144.64-343.552 492.208a31.456 31.456 0 0 0-5.168 11.2v1.408l-33.984 166.4a26.08 26.08 0 0 0 4.304 23.232 31.472 31.472 0 0 0 19.952 12.64 21.472 21.472 0 0 0 6.656 0.704 29.824 29.824 0 0 0 16.992-4.912l152.192-94.096a29.136 29.136 0 0 0 9.6-9.136l340.592-487.296 104.912-149.552a93.68 93.68 0 0 0 14.112-73.024zM737.616 332.272L400.72 814.656l-86.4 53.36 19.2-94.784 340.592-488 101.216-144.64a40 40 0 0 1 25.12-16.144 41.712 41.712 0 0 1 30.288 5.616 37.888 37.888 0 0 1 16.992 23.872 36.464 36.464 0 0 1-5.92 28.8z"></path>
                  <path
                      d="M488.736 250.976h-387.2a36.944 36.944 0 0 1 0-73.888h387.2a36.944 36.944 0 1 1 0 73.888z"></path>
                  <path
                      d="M372.8 545.808H100.944a36.944 36.944 0 0 1 0-73.888H372.8a36.944 36.944 0 1 1 0 73.888z"></path>
                  <path
                      d="M229.536 854.352H101.712a36.944 36.944 0 0 1 0-73.888h127.824a36.944 36.944 0 0 1 0 73.888z"></path>
                  <path
                      d="M923.056 854.352H703.632a36.944 36.944 0 1 1 0-73.888h219.424A36.576 36.576 0 0 1 960 817.408a37.04 37.04 0 0 1-36.944 36.944z"></path>
                  <path
                      d="M922.976 529.28h-116.8a36.944 36.944 0 1 1 0-73.888h116.8a36.576 36.576 0 0 1 36.944 36.944 37.056 37.056 0 0 1-36.944 36.944z"></path>
                </svg>
              </div>
              <div class="centre__leftmenu__item-text pb-1">
                <span>
                  文章列表
                </span>
              </div>
            </div>
          </div>
          <!-- 文件 -->
          <div class="centre__leftmenu__item" @click="menuClickHandler(2, $event)">
            <div class="flex justify-content-start align-items-center ml-2 p-1">
              <div class="centre__leftmenu__item-icon">
                <svg class="icon" viewBox="0 0 1024 1024" width="32" height="32">
                  <path
                      d="M688 312v-48c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8zM296 400c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H296z"></path>
                  <path
                      d="M440 852H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h272c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"></path>
                  <path
                      d="M885.7 903.5l-93.3-93.3C814.7 780.7 828 743.9 828 704c0-97.2-78.8-176-176-176s-176 78.8-176 176 78.8 176 176 176c35.8 0 69-10.7 96.8-29l94.7 94.7c1.6 1.6 3.6 2.3 5.6 2.3s4.1-0.8 5.6-2.3l31-31c3.1-3.1 3.1-8.1 0-11.2zM652 816c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path>
                </svg>
              </div>
              <div class="centre__leftmenu__item-text pb-1">
                <span>
                  文件记录
                </span>
              </div>
            </div>
          </div>
        </template>
      </StickyPanel>
    </div>
    <!-- 统计用户信息：注册时间 | 发布的文章 | 提问的问题 | 回答的问题 | 粉丝数 | 天气插件 -->
    <div class="col-10 relative" style="overflow: hidden;" ref="container">
      <transition-group>
        <!-- 个人中心 -->
        <transition appear
                    appear-active-class="animate__animated animate__fadeIn"
                    enter-active-class="animate__animated animate__backInLeft animate__faster"
                    leave-active-class="animate__animated animate__backOutRight animate__faster">
          <div ref="centreHome" class="absolute w-full" style="overflow-y: hidden;" key="centreHomeComponent"
               v-if="renderMode === 0">
            <CentreHomeView @on-updated="componentUpdated"/>
          </div>
        </transition>
        <!-- 文章列表 -->
        <transition enter-active-class="animate__animated animate__backInLeft animate__faster"
                    leave-active-class="animate__animated animate__backOutRight animate__faster">
          <div class="absolute w-full" key="centreDetailComponent" v-if="renderMode === 1">
            <CentreDetailView @on-updated="componentUpdated"/>
          </div>
        </transition>
      </transition-group>
    </div>
    <ScrollTop/>
  </div>
</template>

<script lang="ts" setup>
/** JS */
import {ref, reactive, onMounted, nextTick, watch} from 'vue';
import {useRoute} from "vue-router";
/** 组件 */
import CommonHeaderToolBar from '@/components/toolbar/CommonHeaderToolBar.vue';
import CentreHomeView from '@/views/centre/CentreHomeView.vue'
import CentreDetailView from '@/views/centre/CentreDetailView.vue';
import StickyPanel from '@/components/panel/StickyPanel.vue';

/** 元素钩子 */
const centreContent = ref(null), renderMode = ref(0), headerContainer = ref(null);
const route = useRoute();

function refreshTop() {
  nextTick(() => {
    if (headerContainer.value) {
      let element = headerContainer.value as HTMLElement;
      element.scrollIntoView({behavior: 'smooth'})
    }
  })
}

watch(() => route.params, () => {
  refreshTop();
}, {deep: true})

const container = ref(null), centreHome = ref(null);

/**
 * 点击左侧栏
 * @param mode 0 主页 | 1 文章
 * @param ev 点击对象
 */
const menuClickHandler = (mode: number, ev: PointerEvent) => {
  let path = ev.composedPath();
  for (let eventTarget of path) {
    let element: HTMLElement = eventTarget as HTMLElement;
    if (element.classList && element.classList.contains('centre__leftmenu__item')) {
      if (element.parentElement) {
        // 移除其他激活的元素
        for (let child of element.parentElement.children) {
          if (child.classList && child.classList.contains('centre__leftmenu__item-active')) {
            child.classList.remove('centre__leftmenu__item-active');
          }
        }
      }
      element.classList.add('centre__leftmenu__item-active');
    }
  }
  renderMode.value = mode;
}

onMounted(() => {
  refreshTop();
})

const componentUpdated = (ev) => {
  if (ev) {
    const element = ev as HTMLElement;
    refreshTop()
    if (container.value) {
      let parent = container.value as HTMLElement;
      parent.style.height = `${element.offsetHeight + 20}px`
    }
  }
}
</script>

<style lang="less" scoped>
// ------------------------- 左侧导航栏 -------------------------
.centre__leftmenu__item-active {
  background-color: #2633b3 !important;

  .centre__leftmenu__item-icon {
    svg {
      path {
        fill: #ffffff !important;
      }
    }
  }

  .centre__leftmenu__item-text {
    color: #ffffff !important;
  }

}

.centre__leftmenu__item {
  width: 100%;
  background-color: var(--root-bg-color);
  border-radius: 15px;
  margin: 5px;
  cursor: pointer;

  .centre__leftmenu__item-icon {
    display: inline-block;
    grid-area: icon;

    svg {
      path {
        fill: #2633b3;
        transition: all .3s;
      }
    }
  }

  .centre__leftmenu__item-text {
    display: inline-block;
    grid-area: content;
    position: relative;
    margin: 10px 10px 10px 10px;
    font-family: "Microsoft YaHei UI", serif;
    font-weight: 600;
    transition: all .3s;
  }

  transition: all .3s;
}

// --------------------------------------------------

</style>
